<template>
  <view class="login-container">
    <input type="text" v-model="username" placeholder="请输入用户名" />
    <input type="password" v-model="password" placeholder="请输入密码" />
    <button @click="login">登录</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: ''
    };
  },
  methods: {
    async login() {
      try {
        // 调用登录接口
        const res = await this.$api.login({
          username: this.username,
          password: this.password
        });
        
        if (res.success) {
          // 保存用户信息，包括角色
          uni.setStorageSync('userInfo', res.data.userInfo);
          
          // 根据角色跳转到不同首页
          this.navigateByRole(res.data.userInfo.role);
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          });
        }
      } catch (error) {
        uni.showToast({
          title: '登录失败，请重试',
          icon: 'none'
        });
        console.error('登录错误:', error);
      }
    },
    
    // 根据角色导航到不同首页
    navigateByRole(role) {
      // 清除当前页面栈，避免返回登录页
      switch(role) {
        case 'admin':
          // 管理员首页
          uni.reLaunch({
            url: '/pages/admin/index'
          });
          break;
        case 'teacher':
          // 教师首页
          uni.reLaunch({
            url: '/pages/teacher/index'
          });
          break;
        case 'student':
          // 学生首页
          uni.reLaunch({
            url: '/pages/student/index'
          });
          break;
        default:
          // 默认首页或无权限页面
          uni.reLaunch({
            url: '/pages/default/index'
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

input {
  border: 1px solid #ccc;
  padding: 20rpx;
  border-radius: 8rpx;
}

button {
  background-color: #007aff;
  color: white;
  padding: 20rpx;
  border-radius: 8rpx;
}
</style>